<template>
    <div id="home" style="position: relative">
        <article class="hello">
            <h2>搜索</h2>
            <div class="search">
                <div style="margin-top: 15px">
                    <el-input
                        placeholder="请输入内容"
                        v-model="title"
                        class="input-with-select"
                    >
                        <template v-slot:append>
                            <el-button
                                icon="el-icon-search"
                                @click="search"
                            ></el-button>
                        </template>
                    </el-input>
                </div>
            </div>
        </article>

        <article class="article" v-if="ifShow">
            <div id="Article">
                <div
                    v-for="(item, index) in searchArtcile"
                    :key="index"
                    class="articleItem"
                >
                    <h2>{{ item.title }}</h2>
                    <div class="time">
                        <p class="date">
                            <span>
                                {{ new Date(item.publishTime).getFullYear() }}
                                /</span
                            >
                            <span>
                                {{ new Date(item.publishTime).getMonth() + 1 }}
                                /</span
                            >
                            {{ new Date(item.publishTime).getDate() }}
                        </p>
                        <!-- <p class="m-y">
                
              </p> -->
                    </div>
                    <div class="show">
                        <div
                            class="img"
                            :style="{
                                backgroundImage: `url(${
                                    item.cover ? item.cover : defaultCoverUrl
                                })`,
                            }"
                        >
                            <div
                                class="adDiv"
                                v-if="item.type && item.type == 3"
                            >
                                <img
                                    src="../assets/img/article/adFlag.png"
                                    class="adImage"
                                />
                                <span class="adText">广告</span>
                            </div>
                        </div>
                        <div class="des">
                            {{ item.content }}
                        </div>
                    </div>
                    <div class="r-b">
                        <p>浏览量：{{ 111 }}</p>
                        <router-link :to="`/article/${item.serial}`"
                            >阅读全文</router-link
                        >
                    </div>
                </div>
            </div>
        </article>

        <article class="article" v-if="!ifShow">
            <h2>一周最热</h2>
            <el-carousel :interval="5000" type="card" height="200px">
                <el-carousel-item
                    v-for="item in hotWeekendly"
                    :key="item"
                    @click="handleItem(item)"
                >
                    <h3
                        class="medium"
                        :style="{
                            backgroundImage: `url(${
                                item.cover ? item.cover : defaultCoverUrl
                            })`,
                            backgroundSize: 'cover',
                            backgroundPosition: 'center',
                        }"
                    >
                        {{ item.title }}
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </article>

        <article class="article" v-if="!ifShow">
            <h2>猜你喜欢</h2>
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item
                    v-for="item in recommend"
                    :key="item"
                    @click="handleItem(item)"
                >
                    <h3
                        class="medium"
                        :style="{
                            backgroundImage: `url(${
                                item.cover ? item.cover : defaultCoverUrl2
                            })`,
                            backgroundSize: 'cover',
                            backgroundPosition: 'center',
                        }"
                    >
                        {{ item.title }}
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </article>

        <article v-if="!ifShow">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="游记" name="0">
                    <div id="Article">
                        <div
                            v-for="(item, index) in allArticle"
                            :key="index"
                            class="articleItem"
                        >
                            <h2>{{ item.title }}</h2>
                            <div class="time">
                                <p class="date">
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getFullYear()
                                        }}
                                        /</span
                                    >
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getMonth() + 1
                                        }}
                                        /</span
                                    >
                                    {{ new Date(item.publishTime).getDate() }}
                                </p>
                                <!-- <p class="m-y">
                
              </p> -->
                            </div>
                            <div class="show">
                                <div
                                    class="img"
                                    :style="{
                                        backgroundImage: `url(${
                                            item.cover
                                                ? item.cover
                                                : defaultCoverUrl
                                        })`,
                                    }"
                                >
                                    <!-- <div
                                        class="adDiv"
                                        v-if="item.type && item.type == 3"
                                    >
                                        <img
                                            src="../assets/img/article/adFlag.png"
                                            class="adImage"
                                        />
                                        <span class="adText">广告</span>
                                    </div> -->
                                </div>

                                <div class="des">
                                    <span
                                        class="dangerousHtml"
                                        v-html="item.content"
                                    ></span>
                                </div>
                            </div>
                            <div class="r-b">
                                <!-- <p>浏览量：{{ 111 }}</p> -->
                                <router-link :to="`/article/${item.serial}`"
                                    >阅读全文</router-link
                                >
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="攻略" name="1">
                    <div id="Article">
                        <div
                            v-for="(item, index) in allArticle"
                            :key="index"
                            class="articleItem"
                        >
                            <h2>{{ item.title }}</h2>
                            <div class="time">
                                <p class="date">
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getFullYear()
                                        }}
                                        /</span
                                    >
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getMonth() + 1
                                        }}
                                        /</span
                                    >
                                    {{ new Date(item.publishTime).getDate() }}
                                </p>
                                <!-- <p class="m-y">
                
              </p> -->
                            </div>
                            <div class="show">
                                <div
                                    class="img2"
                                    :style="{
                                        backgroundImage: `url(${
                                            item.cover
                                                ? item.cover
                                                : defaultCoverUrl2
                                        })`,
                                    }"
                                >
                                    <!-- <div
                                        class="adDiv"
                                        v-if="item.type && item.type == 3"
                                    >
                                        <img
                                            src="../assets/img/article/adFlag.png"
                                            class="adImage"
                                        />
                                        <span class="adText">广告</span>
                                    </div> -->
                                </div>
                                <div class="des">
                                    <span
                                        class="dangerousHtml"
                                        v-html="item.content"
                                    ></span>
                                </div>
                            </div>
                            <div class="r-b">
                                <!-- <p>浏览量：{{ 111 }}</p> -->
                                <router-link :to="`/article/${item.serial}`"
                                    >阅读全文</router-link
                                >
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广" name="3">
                    <div id="Article">
                        <div
                            v-for="(item, index) in allArticle"
                            :key="index"
                            class="articleItem"
                        >
                            <h2>{{ item.title }}</h2>
                            <div class="time">
                                <p class="date">
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getFullYear()
                                        }}
                                        /</span
                                    >
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getMonth() + 1
                                        }}
                                        /</span
                                    >
                                    {{ new Date(item.publishTime).getDate() }}
                                </p>
                                <!-- <p class="m-y">
                
              </p> -->
                            </div>
                            <div class="show">
                                <div
                                    class="img2"
                                    :style="{
                                        backgroundImage: `url(${
                                            item.cover
                                                ? item.cover
                                                : defaultCoverUrl3
                                        })`,
                                    }"
                                >
                                    <div
                                        class="adDiv"
                                        v-if="item.type && item.type == 3"
                                    >
                                        <img
                                            src="../assets/img/article/adFlag.png"
                                            class="adImage"
                                        />
                                        <span class="adText">广告</span>
                                    </div>
                                </div>
                                <div class="des">
                                    <span
                                        class="dangerousHtml"
                                        v-html="item.content"
                                    ></span>
                                </div>
                            </div>
                            <div class="r-b">
                                <!-- <p>浏览量：{{ 111 }}</p> -->
                                <router-link :to="`/article/${item.serial}`"
                                    >阅读全文</router-link
                                >
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </article>
        <div id="return" @click="returnlast" v-if="ifShow">返 回</div>
    </div>
</template>

<script>
export default {
    name: "Home",
    components: {},
    data() {
        return {
            hotWeekendly: [],
            recommend: [],
            allArticle: [],
            activeName: "0",
            title: "",
            ifShow: false,
            searchArtcile: [],
            defaultCoverUrl: "/img/3.1d8b24a7.jpg",
            defaultCoverUrl2: "/img/2.f8aed0af.jpg",
            defaultCoverUrl3: require("../assets/img/article/4.jpg"),
        };
    },
    methods: {
        handleClick() {
            this.$axios({
                method: "get",
                url: `http://localhost:8081/ts/article/allarticle?type=${this.activeName}`,
            }).then((res) => {
                this.allArticle = res.data.respData;
            });
        },
        handleItem(item) {
            this.$router.push(`/article/${item.serial}`);
        },
        search() {
            this.ifShow = true;
            this.$axios({
                method: "post",
                headers: { token: localStorage.getItem("token") || "" },
                url: `http://localhost:8081/ts/article/searchByTitle?title=${this.title}`,
            }).then((res) => {
                this.searchArtcile = res.data.respData;
                this.$message.success("搜索成功");
            });
        },
        returnlast() {
            this.ifShow = false;
        },
    },
    created() {
        this.$axios({
            method: "get",
            url: "http://localhost:8081/ts/article/hotweekendly",
        }).then((res) => {
            this.hotWeekendly = res.data.respData;
        });
        this.$axios({
            method: "get",
            url: "http://localhost:8081/ts/article/recommend",
            headers: { token: localStorage.getItem("token") || "" },
        }).then((res) => {
            this.recommend = res.data.respData;
        });
        this.$axios({
            method: "get",
            url: "http://localhost:8081/ts/article/allarticle?type=0",
        }).then((res) => {
            this.allArticle = res.data.respData;
        });
    },
    updated() {
        console.log(this.allArticle);
    },
    watch: {
        allArticle: function () {
            // console.log("未執行了");
        },
    },
};
</script>

<style lang="less" scoped>
#return {
    position: absolute;
    top: 15px;
    right: -75px;
    width: 30px;
    height: 50px;
    writing-mode: vertical-lr;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
    &:hover {
        background-color: #f5f5f1;
    }
}
#Article {
    flex: 1;

    .articleItem {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 0 4px #ddd;
        padding: 25px 20px;
        background-color: #fff;
        font-family: Quicksand;
        border-radius: 15px;

        h2 {
            margin-bottom: 15px;
            font-size: 20px;
            letter-spacing: 3px;
            line-height: 24px;
            border-left: 5px solid #73b899;
            text-indent: 10px;
        }
        .time {
            position: absolute;
            top: 0;
            right: 5px;
            width: 135px;
            .date {
                font-weight: bolder;
                font-size: 20px;
                text-align: center;
                color: #73b899;
                span {
                    font-size: 20px;
                }
            }
        }
        .show {
            display: flex;
            width: 100%;
            height: 200px;
            .img {
                box-sizing: border-box;
                width: 50%;
                padding-right: 1%;
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                background-image: url(../assets/img/article/3.jpg);
            }
            .img2 {
                box-sizing: border-box;
                width: 50%;
                padding-right: 1%;
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                background-image: url(../assets/img/article/2.jpg);
            }
            .des {
                box-sizing: border-box;
                width: 50%;
                height: 100px;
                padding-left: 5%;
                padding-top: 10px;
                font-size: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
            }
        }
        .r-b {
            position: absolute;
            right: 20px;
            bottom: 20px;
            p {
                position: relative;
                left: 15px;
                top: -15px;
                color: #aaa;
                font-size: 12px;
            }
            a {
                padding: 10px 20px;
                background-color: #409eff;
                color: #fff;
                transition: opacity 0.3s;
                border-radius: 15px;
            }
        }
    }
}
.el-carousel__item h3 {
    color: #d5d9df;
    font-size: 0.1px;
    opacity: 0.7;
    text-align: center;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
article {
    width: 100%;
    padding: 15px 15px 30px;
    margin-bottom: 15px;
    background-color: white;
    font-family: "Quicksand";
    border-radius: 15px;
    h2 {
        margin-bottom: 15px;
        font-size: 30px;
        letter-spacing: 3px;
        padding-top: 10px;
    }
    .des {
        padding-bottom: 20px;
        // border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        text-indent: 2em;
        color: #444;
        font-size: 16px;
        letter-spacing: 4px;
        line-height: 30px;
        font-family: Quicksand, "Microsoft YaHei";
        a {
            text-decoration: underline;
            color: #aaa;
        }
    }
}

article.hello {
    .info {
        display: flex;

        div.left,
        div.right {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        h3 {
            margin-bottom: 30px;
            font-weight: 400;
            font-size: 22px;
            color: #666;
        }

        ul {
            flex: 1;
        }

        div.left {
            ul {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                li {
                    display: flex;

                    p.dt {
                        width: 40%;
                        font-weight: bold;
                    }

                    p.dd {
                        flex: 1;
                    }
                }
            }
        }

        div.right {
            ul li {
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0;
                }

                p.lang {
                    display: flex;
                    justify-content: space-between;
                    letter-spacing: 2px;

                    span.s1 {
                        font-weight: bold;
                    }

                    span.s2 {
                        font-size: 12px;
                        font-weight: bold;
                        color: #999;
                    }
                }

                p.level {
                    width: 100%;
                    height: 5px;
                    background-color: #ececec;

                    span {
                        display: block;
                        height: 100%;
                        background-color: #bfe2e6;
                    }
                }
            }
        }
    }
}

article.article {
    div.content {
        display: flex;

        div.left {
            margin-right: 1px;
            flex: 1;
        }

        div.right {
            margin-left: 1px;
            flex: 1;
        }

        div.art {
            overflow: hidden;

            &.art2 {
                margin-top: 2px;
            }

            position: relative;

            img {
                display: block;
                width: 100%;
            }

            p.title {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                background-color: rgba(0, 0, 0, 0.1);
                font-weight: 700;
                line-height: 30px;
                color: #fff;
                text-align: center;
                transition: bottom 0.3s;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-family: Quicksand;
            }

            div.cover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    opacity: 0;
                    transition: opacity 0.3s;

                    p {
                        position: absolute;
                        font-family: Quicksand;
                        font-weight: bold;
                        transition: 0.3s;
                    }

                    p:nth-child(1) {
                        top: 20%;
                        width: 100%;
                        text-align: center;
                        color: #fff;
                        font-size: 22px;
                        text-transform: uppercase;
                    }

                    p:nth-child(2) {
                        left: 50%;
                        bottom: 20%;
                        width: 30%;
                        height: 32px;
                        border-radius: 16px;
                        text-align: center;
                        line-height: 32px;
                        transform: translateX(-50%);
                        color: #000;
                        background-color: #bfe2e6;
                    }
                }
            }

            &:hover {
                p.title {
                    bottom: -30px;
                }

                div.cover a {
                    opacity: 1;

                    p:nth-child(1) {
                        top: 32%;
                    }

                    p:nth-child(2) {
                        bottom: 32%;
                    }
                }
            }
        }
    }
}
.beian {
    text-decoration: underline;
    color: #aaa;
}
@media screen and(max-width: 640px) {
    article {
        padding: 15px 7px 30px;
        margin-left: -7px;
    }
}
.adImage {
    width: 60px;
    height: 60px;
    float: right;
    position: relative;
    right: -14px;
    top: -19px;
}
.adText {
    position: relative;
    float: right;
    right: -60px;
    font-size: 16px;
}
</style>
